<template>
	<view class="establish">
		<view class="info one">
			<view class="touxiang">
				头像
			</view>
			<view class="usering" @tap="chooseImage">
				<image :src="headimg" mode="aspectFill" alt="">
					<image class="camera" src="/static/talent/user/camera.png"></image>
					<!-- <avatar selWidth="200upx" selHeight="200upx" ref='avatar' fileType='png' :avatarSrc="tempFilePath" class="chooseImg"
				 @upload="myUpload" quality="1" inner=true>
				</avatar> -->
			</view>
		</view>
		<view class="line"></view>
		<view class="typeList">
			<view class="info">
				<u-field v-model.trim="username" type="text" maxlength="10" @blur="usernameBlur" :password-icon="true" input-align="right" label="姓名"
				 placeholder="请输入姓名" placeholder-style="font-size:30rpx;color:#BFBFBF;"></u-field>
			</view>
		</view>
		<view class="typeList">
			<view class="info">
				<u-field v-model.trim="invite_code" type="text" maxlength="10" :password-icon="true" :disabled="true" input-align="right" label="球童编号"
				 placeholder="球童编号" placeholder-style="font-size:30rpx;color:#BFBFBF;"></u-field>
			</view>
		</view>
		<view class="typeList">
			<view class="info">
				<u-field v-model.trim="length" type="number" maxlength="3" @blur="lengthBlur" :password-icon="true" input-align="right" label="服务年限(年)" label-width="200"
				 placeholder="请输入服务年限" placeholder-style="font-size:30rpx;color:#BFBFBF;"></u-field>
			</view>
		</view>
		<view class="zhiye_info">
			<view class="zhiye_title">
				<text>
					<text>职业证书</text>
					<text class="zhiye_title_1" v-if="caddie_info.check_status == 1">(审核通过)</text>
				</text>
				<text class="zhiye_title_2" v-if="caddie_info.check_status == 1 || caddie_info.check_status == 2" @tap.stop="submitImg">提交</text>
			</view>
			<view class="zhiye" @tap="uploadIMG">
				<image v-if="!zhiye_img" src="/static/talent/my/addPicture.png"></image>
				<image v-else :src="zhiye_img" mode="aspectFill"></image>
			</view>
		</view>
		<view class="desc" v-if="caddie_info.check_status == 2">拒绝原因：{{caddie_info.turn_desc}}</view>
		<view class="line"></view>
		<view class="typeList" @tap="getPayPassword">
			<view class="info">
				<u-field v-model.trim="payPassword" type="text" :disabled="true" label-width="200" :password-icon="true" input-align="right"
				 right-icon="arrow-right" label="支付密码" :placeholder="is_setting" placeholder-style="font-size:30rpx;color:#BFBFBF;"></u-field>
			</view>
		</view>
		<view class="typeList" @tap="photoAlbum">
			<view class="info">
				<u-field v-model.trim="picture" type="text" :disabled="true" label-width="200" :password-icon="true" input-align="right"
				 right-icon="arrow-right" label="相册管理" placeholder=" " placeholder-style="font-size:30rpx;color:#BFBFBF;"></u-field>
			</view>
		</view>

		<!-- <view class="submit">
			<view>提交申请</view>
		</view> -->
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/utils/pathToBase64.js';
	import {
		validate
	} from '@/common/api/index'
	import {
		UploadFileToOSS
	} from '@/common/utils/index';
	export default {
		data() {
			return {
				Verification: true,
				mobile: '',
				qrcode: '',
				password: '',
				querypassword: '',
				username: global.userInfo.user_nickname,
				length: 0,
				// length: '',
				nickname: '',
				sex: '',
				sexIndex: 1,
				// birthday: false,
				timer: 60,
				list: [{
						id: '1',
						name: '男'
					},
					{
						id: '2',
						name: '女'
					},
					{
						id: '3',
						name: '保密'
					}
				],
				defaultProps: {
					"label": "name",
					"value": "id"
				},
				birthdayDate: '2020-01-08',
				spanList: [],
				postIndex: 0,
				edit_id: null, // 是否是修改收货地址
				myAmapFun: null, // 高德地图实例
				province: '', // 省
				city: '', //市
				district: '', //区
				addressDesc: '', // 详细地址
				headimg: global.userInfo.head_img,
				address: '',
				tempFilePath: '',
				visible: false,
				is_setting: '未设置',
				imgId: '',
				payPassword: '',
				picture: '',
				is_payPaw: '',
				caddie_info: '',
				invite_code: '',
				zhiye_img: ''
			}
		},
		components: {
			wPicker,
			avatar
		},
		computed: {
			// address(){
			// 	return this.province + this.city + this.district;
			// }
		},
		onLoad() {
			this.getBatInfo()
			// 监听上传头像
			uni.$on('uAvatarCropper', path => {
				this.uploadUserImg(path);
			})
		},
		onShow() {
			// console.log(global.userInfo)
			uni.showLoading({
				title: '加载中'
			})
			
			this.isPayPassword()
		},
		onUnload() {
			uni.$off("uAvatarCropper");
		},
		methods: {
			getBatInfo() {
				this.$api.post(global.apiUrls.batWork, {
					
				}).then(res => {
					// console.log(res)
					uni.hideLoading()
					if(res.data.code ==1) {
						this.caddie_info = res.data.data.caddie_info
						this.length = this.caddie_info.length
						this.invite_code = this.caddie_info.invite_code
						if (this.caddie_info.caddie_cert) {
							this.zhiye_img = this.caddie_info.caddie_cert;
						} else {
							this.zhiye_img = '';
						}
						
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			// 监听昵称修改
			usernameBlur() {
				if (this.username != global.userInfo.user_nickname) {
					this.saveNewFriends()
				} else {
					
				}
			},
			// 监听工龄
			lengthBlur() {
				if (this.length != this.caddie_info.length) {
					this.saveNewFriends()
				} else {
					
				}
			},
			// 跳转修改密码
			getPayPassword() {
				if (this.is_payPaw == '') {
					this.$message.info('请设置支付密码')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/setting/setPayPassword?type=' + 1
						})
					}, 500)
				} else {
					uni.navigateTo({
						url: '/pages/user/user/payPassword'
					})
				}
			},
			// 图像上传
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 抽离出uview-ui中的头像裁剪插件来使用
						uni.navigateTo({
							url: '/pages/user/user/avatar-cropping?destWidth=200&rectWidth=200&fileType="jpg"&myImgUrl=' +
							res.tempFilePaths[0],
							animationDuration: 0
						})
					}
				});
			},
			// 上传用户头像
			uploadUserImg(blob) {
				
				uni.showLoading()
				let _this = this;
				uni.uploadFile({
					url: global.API_BASE_URL + global.apiUrls.get_car_model, //仅为示例，非真实的接口地址
					filePath: blob,
					name: 'file[]',
					success: (uploadFileRes) => {
						this.headimg = JSON.parse(uploadFileRes.data).data[0].thumb
						this.imgId = JSON.parse(uploadFileRes.data).data[0].id
						this.saveNewFriends()
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			// 上传图片
			uploadIMG() {
				if(this.caddie_info.check_status == 0) {
					this.$message.info('正在审核中，请耐心等待')
					return false
				}
				
				let self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
			
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for(let i = 0;i < tempFilePaths.length;i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.apiUrls.get_car_model, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									self.zhiye_img = JSON.parse(uploadFileRes.data).data[0].path;
									
								},
								fail: function(err) {
									console.log(err)
								}
							});
						}
						
					}
				});
			},
			
			// 提交证书
			submitImg() {
				if (!this.zhiye_img) {
					this.$message.info('请上传证书照片');
					return;
				}
				this.saveNewFriends();
			},

			// 个人资料修改
			saveNewFriends() {
				if (this.username == '') {
					this.$message.info('请输入姓名')
					return false
				}
				if (this.length <= 0) {
					this.$message.info('请输入服务年限')
					return false
				}
				this.$api.post(global.apiUrls.personalInfo, {
					user_id: global.userInfo.id,
					user_nickname: this.username,
					head_img: this.headimg,
					sex: global.userInfo.sex,
					birthday: global.userInfo.birthday,
					plate: global.userInfo.plate,
					address: global.userInfo.address,
					length: this.length,
					caddie_cert: this.zhiye_img
				}).then(res => {
					// this.$message.info(res.data.msg)
					if (res.data.code == 1) {
						// console.log(res)
						this.$message.info('操作成功')
						global.userInfo = res.data.data.userinfo
						uni.setStorageSync('USER_INFO', res.data.data.userinfo);
						this.getBatInfo();
					}
				})
			},
			// 跳转相册管理
			photoAlbum() {
				uni.navigateTo({
					url: '/pages/user/user/album'
				})
			},
			// 判断是否设置支付密码
			isPayPassword() {
				this.$api.post(global.apiUrls.postUserCheck_pay_password, {
					
				}).then(res => {
					uni.hideLoading()
					if(res.data.code == 1) {
						this.is_payPaw = res.data.data.withdraw_paw
						if(this.is_payPaw == '') {
							this.is_setting = '未设置'
						} else {
							this.is_setting = '已设置'
						}
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FFFFFF;
		height: 100%;
	}

	.establish {
		// padding: 0 32upx;
		min-height: 100vh;
		background: #f2f2f1;

		.typeList {
			padding: 0 32rpx;
			background: #FFFFFF;
		}
		.zhiye_info {
			padding: 0 32rpx 32rpx;
			background: #FFFFFF;
			.zhiye_title {
				padding: 32rpx 0 24rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				.zhiye_title_1 {
					font-size: 30rpx;
					margin-left: 5rpx;
				}
				.zhiye_title_2 {
					font-size: 26rpx;
					color: #006747;
				}
			}
			.zhiye {
				width: 180rpx;
				height: 180rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
		}
		.desc {
			color: crimson;
			font-size: 24rpx;
			margin-top: 16rpx;
			padding-left: 28rpx;
		}

		.info {
			padding: 32rpx 0;
			border-bottom: 1px solid #f2f2f1;
			position: relative;
			font-size: 32rpx;

			.code {
				position: absolute;
				top: 36upx;
				left: 188upx;
				color: #3993E1;
				font-size: 28upx;
			}

			.codeTime {
				position: absolute;
				top: 36upx;
				left: 188upx;
				font-size: 28upx;
			}
		}

		.one {
			// padding: 16upx 0;
			// display: flex;
			height: 351rpx;
			background: #f2f2f1;
			padding: 65rpx 0 0 !important;
			text-align: center;


			.touxiang {
				margin-bottom: 24rpx;
			}

			.usering {
				text-align: center;
				margin: 0 auto;
				width: 180upx;
				height: 180upx;
				border-radius: 8rpx;
				position: relative;

				image {
					width: 180upx;
					height: 180upx;
					border-radius: 8rpx;
				}

				.camera {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 56rpx;
					height: 56rpx;
				}
			}
		}

		.tow {
			display: flex;

			.sex {
				flex: 5;
			}

			.radio {
				flex: 5;
				text-align: right;
			}
		}

		.three {
			display: flex;

			.post {
				flex: 2;
			}

			.post_type {
				flex: 8;
				text-align: right;

				span {
					padding: 12upx 40upx;
					border: 1px solid #999999;
					font-size: 28upx;
					margin-left: 16upx;
					border-radius: 8upx;
				}
			}
		}

		.four {
			display: flex;

			.four_1 {
				flex: 3;
			}

			.four_2 {
				flex: 7;
				text-align: right;
				color: #bfbfbf;

				.icon_x {
					margin-left: 18upx;
					margin-top: -4upx;
					color: #999999;
				}

				.queryaddress {
					text-align: left;
					display: inline-block;
					color: #333333;
				}
			}
		}

		.submit {
			position: fixed;
			left: 32upx;
			bottom: 40upx;
			width: 686upx;
			height: 88upx;
			background: #006747;
			opacity: 1;
			border-radius: 8upx;
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88upx;
			// margin: 40upx 0;
		}
	}

	/deep/.u-field {
		padding: 0 !important;
		font-size: 32upx !important;
		color: rgba(51, 51, 51, 1);
	}

	/deep/.u-flex {
		width: 100%;
		margin: 0;
		font-size: 32rpx;
	}

	/deep/.fild-body {
		font-size: 32rpx !important;
	}

	/deep/.u-field__input-wrap {
		// height: 128upx;
		// line-height: 128upx;
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	/deep/.u-field-inner {
		// width: 100% ;
	}

	.active {
		border: 1px solid #3993E1 !important;
		color: #3993E1;
	}

	.line {
		height: 20rpx;
		width: 100%;
		background: #f2f2f1;
	}
</style>
